<template>
    <div>
        <button @click="random">random</button>
        <transition-group class="wraps" tag="div" move-class="moveRandom">
            <div class="items" :key="item.id" v-for="item in list">{{ item.number }}</div>
        </transition-group>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import _ from 'lodash'

let list = ref(Array.apply(null, {length:81} as number[] ).map((_,index)=>{
    return {
        id:index,
        number:( index % 9 ) + 1
    }
}))

const random = () => {
    list.value = _.shuffle(list.value)
}

</script>

<style scoped>
.wraps{
    display: flex;
    flex-wrap: wrap;
    width: calc(25px * 10 + 12px);
}
.items{
    width: 25px;
    height: 25px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
}
.moveRandom{
    transition: all 1s;
}
</style>


